<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import {
		userStore
	} from '@/pinia';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'

	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let postId = ref('')
	let screenObj = ref({})
	let detailObj = ref({})
	let delShow = ref(false)
	let latitude = ref(40.7128)
	let longitude = ref(-74.0060)
	onLoad((options) => {
		postId.value = options.id
		console.log(postId.value, "打印postID")
		screenObj.value = JSON.parse(options.id)
		getDetail()
	})
	onShow(() => {
		getDetail()
	})
	const getDetail = () => {
		let url;
		// if (userStoreInfo.userFlag == 2) {
		// 	url = proxy.$api.marketDetail
		// } else {
		// 	url = proxy.$api.marketDetail2
		// }
		proxy.$req('GET', proxy.$api.getServiceDetail, {
			id: postId.value,
		}).then((res) => {
			console.log(res, "打印res");
			detailObj.value = res.result

			detailObj.value.images = JSON.parse(res.result.images)

			//商家优势
			detailObj.value.merchantAdvantages = res.result.merchantAdvantages
			detailObj.value.merchantAdvantagesImage = JSON.parse(res.result.merchantAdvantagesImage)

			//服务类型
			detailObj.value.serviceType = res.result.serviceType
			detailObj.value.serviceTypeImage = JSON.parse(res.result.serviceTypeImage)
			//律所介绍
			detailObj.value.lawFirmProfile = res.result.lawFirmProfile
			detailObj.value.lawFirmProfileImage = JSON.parse(res.result.lawFirmProfileImage)
			//服务项目
			detailObj.value.serviceProgram = res.result.serviceProgram
			detailObj.value.serviceProgramImage = JSON.parse(res.result.serviceProgramImage)

			detailObj.value.companyName = res.result.companyName
			detailObj.value.address = res.result.address

			console.log(detailObj.value, 'detailObj.value');
		})
	}
	const routerLink = () => {
		router.push({
			name: 'addLawServe',
			params: {
				id: postId.value,
			}
		})
	}
	const previewImg = (res) => {
		console.log(res);
		uni.previewImage({
			urls: [res],
			// longPressActions: {
			// 	itemList: ['保存图片'],
			// 	success: function (data) {
			// 		// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 	},
			// 	fail: function (err) {
			// 		console.log(err.errMsg);
			// 	}
			// }
		});
	}
	const call = (e) => {
		uni.makePhoneCall({
			phoneNumber: parseInt(e)
		})
	}
	//删除
	const delDetail = () => {
		proxy.$req('delete', proxy.$api.deteleServe, {
			ids: detailObj.value.id
		}).then(res => {
			uni.$u.toast(res.message)
			if (res.success) {
				uni.$emit('refreshServe', {})
				setTimeout(() => {
					uni.navigateBack()
				}, 600)
			}
			delShow.value = false
		})
	}
</script>
<template>
	<u-modal :showConfirmButton="false" width="540rpx" :show="delShow" title="提示">
		<view class="modalDel">
			<view class="del">
				确定要删除吗？
			</view>
			<view class='delFoot'>
				<button class="btn1" @click="delShow = false">取消</button>
				<button class="btn2" @click="delDetail()">确定</button>
			</view>
		</view>
	</u-modal>
	<view class="navSearch" v-if="detailObj.hasOwnProperty('images')&&detailObj.images.length>0 && detailObj.images"
		:style="{
		backgroundImage:'url(' + detailObj.images[0].url  + ')'
	}">
		<u-navbar :placeholder="true" leftText="" title="" bgColor="rgba(0,0,0,0)" auto-back :fixed="false"></u-navbar>
	</view>
	<view class="mdNav">
		<view class="mdnTit ">
			{{ detailObj.title }}
		</view>
		<view style="display: flex;">
			<view><u-icon size="40rpx" color="black" name="map"></u-icon></view>
			<view>{{detailObj.address}}</view>
		</view>
	</view>
	<view class="allDetail">
		<view class="mdDetail">
			<view class="mddTit">
				商家优势
			</view>
			<view class="mddRich">
				<text>{{ detailObj.merchantAdvantages }}</text>
				<u-scroll-list :indicator="false"
					v-if="detailObj.hasOwnProperty('merchantAdvantagesImage')&&detailObj.merchantAdvantagesImage.length>0 && detailObj.merchantAdvantagesImage">
					<view v-for="(item, index) in detailObj.merchantAdvantagesImage" :key="index">
						<view class="scrollItem">
							<image :src="item.url" @click="previewImg(item.thumb)"></image>
						</view>
					</view>
				</u-scroll-list>
				<!-- <image :src="detailObj.companyProfileImgUrl" mode="widthFix"></image> -->
			</view>
		</view>
		<view class="mdDetail">
			<view class="mddTit">
				服务类型
			</view>
			<view class="mddRich">
				<text>{{ detailObj.serviceType }}</text>
				<u-scroll-list :indicator="false"
					v-if="detailObj.hasOwnProperty('serviceTypeImage') && detailObj.serviceTypeImage.length>0 && detailObj.serviceTypeImage">
					<view v-for="(item, index) in detailObj.serviceTypeImage" :key="index">
						<view class="scrollItem">
							<image :src="item.url" @click="previewImg(item.thumb)"></image>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- <view class="mddRich">
				<text>{{ detailObj.mainProjects }}</text>
				<image :src="detailObj.mainProjectsImgUrl" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="mdDetail">
			<view class="mddTit">
				律所介绍
			</view>
			<view class="mddRich">
				<text>{{ detailObj.lawFirmProfile }}</text>
				<u-scroll-list :indicator="false"
					v-if="detailObj.hasOwnProperty('lawFirmProfileImage')&&detailObj.lawFirmProfileImage.length>0 && detailObj.lawFirmProfileImage">
					<view v-for="(item, index) in detailObj.lawFirmProfileImage" :key="index">
						<view class="scrollItem">
							<image :src="item.url" @click="previewImg(item.thumb)"></image>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- <view class="mddRich">
				<text>{{ detailObj.companyQualifications }}</text>
				<image :src="detailObj.companyQualificationsImgUrl" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="mdDetail">
			<view class="mddTit">
				【服务项目】
			</view>
			<view class="mddRich">
				<text>{{ detailObj.serviceProgram }}</text>
				<u-scroll-list :indicator="false"
					v-if="detailObj.hasOwnProperty('serviceProgramImage')&&detailObj.serviceProgramImage.length>0 && detailObj.serviceProgramImage">
					<view v-for="(item, index) in detailObj.serviceProgramImage" :key="index">
						<view class="scrollItem">
							<image :src="item.url" @click="previewImg(item.thumb)"></image>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- <view class="mddRich">
				<text>{{ detailObj.cooperationCase }}</text>
				<image :src="detailObj.cooperationCaseImgUrl" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="mdDetail">
			<view class="mddTit">
				所在位置
			</view>
			<map style="width: 625rpx;height: 400rpx;" :latitude="detailObj.latitude"
				:longitude="detailObj.longitude"></map>
			<!-- <view class="mddRich">
				<text>{{ detailObj.cooperationMethods }}</text>
				<image :src="detailObj.cooperationMethodsImgUrl" mode="widthFix"></image>
			</view> -->
			<view class="location">
				<view class="name">
					{{detailObj.companyName}}
				</view>
				<view class="address">
					{{detailObj.address}}
				</view>
			</view>
		</view>
	</view>
	<view class="btmBtn" v-if="userStoreInfo.userFlag==2">
		<view class="bbItem shiti" @click="routerLink">
			编辑
		</view>
		<view class="bbItem loukong" @click="delShow = true">
			删除
		</view>
	</view>
	<view class="btmBtn" v-else>
		<view class="bbItem loukong" style="width: 698rpx;" @click="call(detailObj.contactPhone)">
			拨打电话
		</view>
	</view>

</template>
<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.location {
		margin-top: 20rpx;

		.name {
			font-family: PingFangSC-Medium;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.address {
			font-size: 28rpx;
		}
	}

	.location::before {
		content: none;
	}

	.modalDel {
		.del {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		.delFoot {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.btn1 {
				width: 206rpx;
				height: 88rpx;
				background: rgba(255, 255, 255, 0);
				border: 2rpx solid #CB645E;
				color: #CB645E;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}

			.btn2 {
				width: 206rpx;
				height: 88rpx;
				background: #CB645E;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}
		}
	}

	.navSearch {
		width: 100%;
		height: 482rpx;
		background-size: 100%;
		// background-color: #e7e7e7;
	}

	.mdNav {
		width: calc(100% - 64rpx);
		padding: 40rpx 32rpx;
		background-color: #fff;

		.mdnTit {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.mdnCon {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			view {
				display: flex;
				justify-content: center;
				align-items: center;
				// margin: 0 10rpx;
				margin-right: 8rpx;

				text {
					font-size: 28rpx;
					margin-right: 70rpx;
				}
			}
		}
	}

	.allDetail {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 90rpx;
		background-color: #fff;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
	}

	.mdDetail {
		width: calc(100% - 64rpx);
		padding: 32rpx;

		.mddTit {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
		}

		.mddRich {
			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.65);
			}

			.scrollItem {
				margin: 10rpx 10rpx;

				image {
					width: 280rpx;
					height: 200rpx;
				}

				text {
					font-size: 26rpx;
				}
			}
		}

		// .mddRich {
		// 	text {
		// 		font-size: 26rpx;
		// 	}
		// }
	}

	.btmBtn {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;

		.bbItem {
			width: 328rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
			text-align: center;
		}

		.loukong {
			background-color: #CB645E;
			color: #fff;
		}

		.shiti {
			border: 2rpx solid #CB645E;
			color: #CB645E;
		}
	}
</style>